通用属性
关键配置
该组件最关键最基础的两个配置项目,分别是用来传入数据以及数据的映射关系,包括一系列配置的自动生成。
配置项 | 简介 | 类型 | 备注 |
---|---|---|---|
data | 图表的数据来源 | array[object] | 其中一项作为X轴,其他项目作为数据源 |
col | 图表与数据的映射关系 | array[string/object] | 默认第一项用来作为X轴,其余会作为数据映射到图表上。假如作为对象,会直接作为该数据的配置项。 |
这边给出一组简单的数据配置案例
const data= [
{
date:"2016/05/08",
sold:50,
pay:400
},
{
date:"2016/05/09",
sold:500,
pay:40
}
];
const col=[ "date",{ name:"sold",step:true },"pay" ]
//如果需为图例起别名的话请参考一下格式
const col=[ "date","销售:sold","付款:pay" ]
基础配置
这边会罗列出替使用者做出处理的配置,其他没有列出来的需要引用的请自行使用对象形式传入,也可以通过setting进行补充配置。
配置项 | 简介 | 类型 | 备注 |
---|---|---|---|
title | 图表标题 | string | |
legend | 图例按钮 | boolean | 图例是否显示,会根据col的数据自动生成 |
xAxis | X轴配置 | 默认生产 | |
yAxis | Y轴配置 | 默认生成 | |
dataZoom | 缩放功能 | string | 三种模式:inside/slider/both |
tooltip | 数据提示工具 | string | 两种模式:shadow/cross |
toolbox | 工具类 | array(string/object) | 支持的工具类:dataZoom/dataViwer/magicType/restore/saveAsImage/brush |
brush | 刷子工具 | array(string) | 刷子类型:rect/polygon/lineX/lineY/keep/clear |
clolor | 配色 | array(string) | 默认为echarts配色 |
backgroundColor | 背景颜色 | string | 默认为透明 |
扩展配置
配置项 | 简介 | 类型 | 备注 |
---|---|---|---|
width | 宽 | string | 默认继承父级宽度 |
height | 高 | string | 默认继承父级高度 |
legendLimit | 图例数量限制 | number | |
loading | 加载状态 | boolean | |
reverse | X轴与Y轴置换 | boolean | |
percent | 显示Y轴百分比 | boolean | |
legendSelectedMode | 图例选择模式 | string | single/multiple |
events | 事件绑定接口 | array(object) | 示例{event:'click',fun:(e)=>console.log(e)} event为触发的事件名称,fun为执行函数 |
log | 显示入参 | boolean |